<template>
	<div class="draggle-container">
		<draggable v-model="fileList"  chosenClass="chosen" forceFallback="true" :delay= "300"  animation="300" @start="onStart" @end="onEnd">
			<li v-for=" (i,index) in fileList" :key="i.resourceId" class="drag-box" style="" >
				<el-image :src="i.url" style="height:100%;width:100%;display:block;margin:0;border:0;"></el-image>
					<span class="layer-black">
					<span
						class="layer-icon"
						@click="handlePictureCardPreview({url:i.url})"
					>
						<i class="el-icon-zoom-in"></i>
					</span>
					<span
						class="layer-icon"
						style="margin-left:5px;"
						@click="handlePictureCardRemove(index)"
					>
						<i class="el-icon-delete"></i>
					</span>
				</span>
			</li>
			<global-upload :limitNum="limitNum" :isIncludeUrl="true" :ref="uploadName"
					@imageUpload="uploadSuccess" @imageRemove="uploadRomove"  :show-file-list="false" :initData="fileList"
				 :isHeadImg="false">
			</global-upload>
		</draggable> 
		<el-dialog :visible.sync="dialogVisible" :modal="false">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
	</div>
</template>

<script>
import GlobalUpload from '@/components/GlobalUpload';
import draggable from 'vuedraggable'

export default {
	components:{GlobalUpload,draggable},
	data(){
		return {
			fileList:[],
			drag:false,
			dialogVisible:false,
			dialogImageUrl:'',
			
		}
	},
	props:{
		limitNum:{
			type:Number,
			default:2
		},
		uploadName:{
			type:String,
			default:'upload'
		},
		initData:{
			type:Array,
			default:()=>{return []
            }
		}
	},
	created(){
		this.fileList = this.initData;
	},
	methods:{
		uploadSuccess(data){
			console.log(data);
			this.fileList.push(
				{
					resourceId:data.currentId,
					url:data.local[data.local.length-1].url,
					sort:this.fileList.length
				}
			)
			this.$emit('change',this.fileList);
		},
		uploadRomove(val){},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		handlePictureCardRemove(index) {
			this.fileList.splice(index,1);
			this.$emit('change',this.fileList);
			let id = this.fileList[index].id;
			this.$refs[this.uploadName].draggleRemove(id);
		},
		 //拖拽开始
		 onStart(){
			this.drag=true;
		},
		//拖拽结束事件
		onEnd(val) {
			console.log(val);
			console.log(this.fileList);
			this.fileList.forEach((item,index)=>{
				item.sort = index+1
			})
			this.drag=false;
			this.$emit('change',this.fileList);
		},
	}
}
// d707488e-5368-46b5-8dbb-01b120234827
// 3c868877-6a39-44a5-8f84-29658f8aa9b
</script>

<style lang="scss">
	.draggle-container{
		.el-upload--picture-card{
			width: 98px;
			height: 98px;
			line-height: 108px;
		}
		.drag-box{
			position: relative;
			list-style:none;
			margin-right: 5px;
			overflow: hidden;
			background-color: #fff;
			border: 1px solid #c0ccda;
			border-radius: 6px;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			width: 98px;
			height: 98px;
			margin: 0 8px 8px 0;
			display: inline-block;
			.layer-black {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				cursor: default;
				text-align: center;
				color: #fff;
				opacity: 0;
				font-size: 20px;
				background-color: rgba(0,0,0,.5);
				-webkit-transition: opacity .3s;
				transition: opacity .3s;
				&:hover {
					opacity: 1;
				}
			}
			.layer-black::after {
				display: inline-block;
				content: "";
				height: 100%;
				vertical-align: middle;
			}
		}
	}
</style>